<template>
	<div class="category bgff">
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
			<h1>{{$store.state.navbarTitle}}</h1>
			<a href="search.html" class="rt_searchIcon">&#37;</a>
		</header>
		<aside class="class_tree" ref="tree">
			<scroll-wrapper :class='left-scroll-wrapper'>
				<ul>
					<li class="current_style">
						<a>
							<img src="static/upload/menu_bg_01.png" />
							<strong>蔬菜水果</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_06.png" />
							<strong>禽蛋肉类</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_10.png" />
							<strong>水产火锅</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_14.png" />
							<strong>熟食豆品</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_03.png" />
							<strong>米面粮油</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_07.png" />
							<strong>调料干货</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_11.png" />
							<strong>餐厨用品</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_15.png" />
							<strong>常购品</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_03.png" />
							<strong>米面粮油</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_07.png" />
							<strong>调料干货</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_11.png" />
							<strong>餐厨用品</strong>
						</a>
					</li>
					<li>
						<a>
							<img src="static/upload/menu_bg_15.png" />
							<strong>常购品</strong>
						</a>
					</li>
				</ul>
			</scroll-wrapper>
		</aside>
		<div class="category_cont" ref="con">
			<scroll-wrapper :class='right-scroll-wrapper'>
				<div class="tab_proList">
					<dd>
						<ul>
							<li v-for="pro in addCartList">
								<a href="product.html" class="goodsPic">
									<img v-lazy="pro.proImg" />
								</a>
								<div class="goodsInfor">
									<h2>
										<a href="product.html">{{pro.proTitle}}</a>
									</h2>
									<p>
										<strong class="price">{{pro.proPrice}}</strong>
									</p>
									<a href="javascript:;">数量:{{pro.proCount}}</a>
									<a href="javascript:;" class="addToCart" @tap="addToCart(pro)">&#126;</a>
								</div>

							</li>
						</ul>
						<div class="loading-more">
							<p v-if="!loading || addCartList.length<1">已无更多了</p>
							<p v-else>正在加载...</p>
						</div>
					</dd>
				</div>
			</scroll-wrapper>
		</div>
	</div>
</template>
<script>
	import scrollWrapper from 'components/scrollWrapper.vue';
	import data from '@/data/data.js';
	import store from '@/store/index'
	export default {
		components: {
			scrollWrapper
		},
		data() {
			return {
				loading: false
			}
		},
		computed: {
			addCartList() {
				return data.productList[0].dataList.concat(data.productList[1].dataList);
			}
		},
		mounted() {
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.$nextTick(function(){
				this.$refs.tree.style.height = (h - 100) + 'px';
				this.$refs.con.style.height = h + 'px';
			})
			
		},
		methods: {
			addToCart(pro) {
				let cart = JSON.parse(localStorage.getItem('cart')) || [];
				let proInfo = pro;
				let proIndex = cart.findIndex(item => item.proId == pro.proId);
				//foodIndex为-1表示不存在 ,要加入商品
				if (proIndex === -1) {
					cart.push({
						proId: pro.proId,
						proTitle: pro.proTitle,
						proCount: 1,
						proImg: pro.proImg,
						oldProPrice: pro.oldProPrice,
						proPrice: pro.proPrice
					});
				} else {
					cart[proIndex].proCount++;

				}
				this.cartList = cart;
				mui.toast('成功加入购物车')
				store.dispatch('updateAddGoodsNum', this.cartList.length);
				store.dispatch('updateCartList', this.cartList);
				localStorage.setItem('cart', JSON.stringify(this.cartList));
			},
		}
	}
</script>
<style scoped>
	.mui-content {
		display: flex;
	}

	aside.class_tree {
		margin-top: 44px;
		flex: 2.2rem 0 0;
		position: relative;
	}

	.category_cont {
		flex: 1;
		position: relative;
	}
</style>
